Day 24 - Canvas 常用套件 - fabric js 介紹

之前的實作上幾乎都是使用原生的方式跟 Canvas 作互動或者影像處理，而其實現在有許多套件有封裝好許多東西方便我們使用，接下來的時間就來介紹一些吧！

fabric js

先前我們使用在 Canvas 的用法大都以原生操控使用為主，而 fabricjs 則幫我們封裝好了許多在互動上需要常使用的操作，例如在影像濾鏡上面就有實作我們之前提到的濾鏡如亮度、飽和度，銳利化等等，而在一般的互動上，原生的 Canvas 如果要進行繪製圖案或線條的動作其實蠻麻煩，而 fabricjs 封裝了許多基本圖案及互動，讓我們可以直接使用，就讓我們接著下去吧！

首先先安裝

 npm install fabric --save

接著在引入上要注意需要這樣使用

import { fabric } from 'fabric'

接著就可以開始使用了

const canvas = this.$refs.drawCanvas
// 將 canvas 傳入
const fabricCanvas = new fabric.Canvas(canvas)
// 從 url 讀取圖片
fabric.Image.fromURL(img2, img => {
    const oImg = img.set({
    // 這邊可以設定上下左右距離、角度、寬高等等
      left: 0
      // top: 100
      // angle: 15,
      // width: 500,
      // height: 500
    })
    // 將圖片縮放到寬高
    oImg.scaleToWidth(cw)
    oImg.scaleToHeight(ch)
    // 記得要加進入才會顯示
    fabricCanvas.add(oImg)
    // 使用亮度濾鏡
    const filter = new fabric.Image.filters.Brightness({
      brightness: 0.5
    })
    oImg.filters.push(filter)
    oImg.applyFilters()
  })

主要可以看到提供了很多屬性可以設定，例如上下距離，在之前我們都要透過繁瑣的 drawimage 跟 getimage 然後指定距離來使用，現在可以直接設定，接下來濾鏡部分使用也很簡單，找到想要的濾鏡並直接填入強度就好，其他濾鏡用法也大同小異，像是之前實作的飽和度、銳利化等等常用濾鏡都有，而且詳細看了濾鏡實作之後發現是有使用 WEB GL 來實作的，有空再來深入研究一下。

但我覺得其實最厲害的是當你加入一些圖案或者是線條的時候，每一個都會被視為一個物件，而且都有常用的控制，例如旋轉、縮放等等，像是以下這段

  const circle = new fabric.Circle({
    radius: 80, fill: 'green', left: 100, top: 100
  })
  const triangle = new fabric.Triangle({
    width: 120, height: 180, fill: 'blue', left: 300, top: 200
  })
  const editText = new fabric.IText('雙擊我編輯', {
    top: 400,
    left: 400
  })
  fabricCanvas.add(circle, triangle, editText)

我們創了三個物件，分別是圓形、三角形、互動文字，最後呈現

可以看到原生這些物件都有提供很良好的互動，如果是有在需要做一些圖片編輯器或者是畫板像是 你畫我猜 蠻適合用這個來做。

小結

這次的行程也參觀了很多藏傳佛教的寺廟，拉達克地區是印度地區中少見以佛教為主要信仰的地區，圖中的喇嘛正在準備慶典要用的畫，因為通常在儀式完後就會放在水裡漂走，所以難得可以看見實體！

今天簡單介紹了一下 fabricjs 的基本用法，明天在來做一些應用吧！